<template>
    <view :class="'l-form-item-class form-item-container ' + ('label-' + labelPlacement) + ' ' + (tipType === 'text' ? 'textHeight' : '')">
        <view
            :class="'l-form-label-class label-text ' + (isRequired ? 'label-text-required' : '') + ' ' + ('label-text-' + labelPlacement + '-' + alignItems)"
            :style="'min-width: ' + (labelPlacement === 'row' ? labelWidth : '100%') + ';max-width: ' + (labelPlacement === 'row' ? labelWidth : '100%')"
        >
            <view v-if="labelSlot">
                <slot name="label" />
            </view>
            <view v-else>
                {{ label }}
            </view>
        </view>
        <view class="label-content l-form-content-class">
            <slot />
        </view>
        <l-error-tip class="error-text" l-error-text-class="l-error-text-class" :errorText="errorText" v-if="errorText" />
    </view>
</template>

<script>
import lErrorTip from '../error-tip/index';
import rules from '../behaviors/rules';
export default {
    unicomGroup: ['form'],
    data() {
        return {
            isRequired: false,
            tipType: '',
            errorText: ''
        };
    },
    options: {
        multipleSlots: true
    },
    externalClasses: ['l-form-item-class', 'l-form-label-class', 'l-form-content-class', 'l-error-text-class'],
    mixins: [rules],
    relations: {
        '../form/index': {
            type: 'parent',
            linked: function () {},
            linkChanged: function () {},
            unlinked: function () {}
        }
    },
    props: {
        label: String,
        labelPlacement: {
            type: String,
            default: 'row'
        },
        alignItems: {
            type: String,
            default: 'start'
        },
        labelWidth: {
            type: String,
            default: '200rpx'
        },
        labelSlot: {
            type: Boolean,
            default: false
        },
        name: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this.initRules();
            this.isRequired();
        },

        isRequired() {
            this.rules.forEach((e) => {
                if (e.required) {
                    this.setData({
                        isRequired: true
                    });
                }
            });
        }
    },
    created: function () {}
};
</script>
<style>
.form-item-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    color: #777;
    padding: 0 20rpx;
    position: relative;
}
.form-item-container.textHeight {
    margin-bottom: 44rpx;
}
.form-item-container.label-column {
    flex-direction: column;
}
.form-item-container.label-column .label-text {
    line-height: 44rpx;
}
.form-item-container.label-row {
    flex-direction: row;
}
.form-item-container.label-row .label-text {
    line-height: 88rpx;
}
.form-item-container .label-text {
    display: flex;
    line-height: 88rpx;
}
.form-item-container .label-text-column-start {
    justify-content: flex-start;
}
.form-item-container .label-text-column-end {
    justify-content: flex-end;
}
.form-item-container .label-text-column-center {
    justify-content: center;
}
.form-item-container .label-text-row-start {
    justify-content: flex-start;
}
.form-item-container .label-text-row-end {
    justify-content: flex-end;
}
.form-item-container .label-text-row-center {
    justify-content: center;
}
.form-item-container .label-content {
    flex: 1;
}
.form-item-container .label-text-required::before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-family: SimSun, sans-serif;
    content: '*';
}
.error-text {
    text-align: right;
    line-height: 44rpx;
    color: #f56c6c;
    font-size: 12px;
    position: absolute;
    top: 100%;
    left: 0;
    padding-left: 24rpx;
}
.row {
    display: none !important;
}
</style>
